<template>
	<view class="container">
		<view class="explore-navi">
			<image src="/static/imgs/explore/calendar.png" @click="toPlan()" />
			<view class="search">
				<input v-model="search" @input="onKeyInput" placeholder="Search here" />
				<image src="/static/imgs/explore/search.png" @click="searchExplore" />
			</view>
			<image src="/static/imgs/explore/notifications.png" />
		</view>



		<view class="explore-list">
			<view class="explore-list-pane" v-for="(item, index) in momentList" :key="item.momentId">
				<view class="pane-info">
					<view class="pane-info-title">
						<image class="avatar" :src="item.createAvatar" />
						<view class="person">
							<text class="person-name">{{ item.createBy }}</text>
							<text class="person-time">{{ item.createTime }} </text>
						</view>
						<view class="more" :class="{ 'menu-open': item.menu }" @click="showMenu($event, item)">
							···
							<view class="menu" @click="deleteExplore(item, index)"> 删除 </view>
						</view>
					</view>
					<view class="pane-info-area">
						{{ item.info }}
					</view>
				</view>
				<view class="pane-talk" >
					<view class="pane-talk-menus">
						<view class="menus-left">
							<view class="menus-card">
								<image class="heart"
									:src="item.liked ? '/static/imgs/explore/Heart.png' : '/static/imgs/explore/Heart-OutLine.png'"
									@click="likedExplore(item)" />
								<text>{{item.likeCount}}</text>
							</view>
							<view class="menus-card">
								<image class="heart"
									src="/static/imgs/explore/comment1.png" />
								<text>{{item.commentCount}}</text>
							</view>
							<!-- <image class="direct" src="/static/imgs/explore/Direct.png" /> -->
						</view>
						<!-- <view class="menus-right">
							<image class="collect" src="/static/imgs/explore/Collect.png" />
						</view> -->
					</view>
					<view class="pane-talk-search">
						<input class="search" v-model="item.msg" placeholder="Comment here"
							@focus="focusComment(item.momentId)" @confirm="confirm" />
					</view>
					<view class="pane-talk-comment"> {{item.commentCount}}条评论 </view>
					<view class="comment" v-for="comment in item.momentCommentVoList" :key="comment.commentId">
						<view class="comment-pane">
							<view class="comment-person">
								<image :src="comment.createAvatar" />
								<text class="name">{{comment.createBy}} ：</text>
							</view>
							<view class="comment-info">{{ comment.info }} </view>
						</view>
						<view class="comment-detail">
							<text class="time">{{comment.createTime}}</text>
							<view class="status">
								<!-- <image src="/static/imgs/explore/Heart.png" />
								<text>420</text> -->
								<image src="/static/imgs/explore/Comment-OutLine.png"></image>
							</view>
						</view>
				<!-- 		<view class="comment" >
							<view class="comment-pane">
								<view class="comment-person">
									<image src="/static/logo.png" />
									<text class="name">AYM ：</text>
								</view>
								<view class="comment-info">{{ comment.info }} </view>
							</view>
							<view class="comment-detail">
								<text class="time">2023-04-05</text>
								<view class="status">
									<image src="/static/imgs/explore/Comment-OutLine.png"></image>
								</view>
							</view>
						</view> -->
					</view>
					<!-- <view class="pane-talk-info"> David Word truly cannot explain how much i respect and adore you.
					</view>
					<view class="pane-talk-comment"> View all 50 comments </view> -->
				</view>
			</view>
		</view>
	</view>
	<Tabbar />
</template>

<script setup>
	import Tabbar from '@/components/Tabbar/Tabbar.vue';
	import {
		ref
	} from 'vue';
	import {
		exploreMoment,
		likeMoment,
		cancleLikeMoment,
		deleteMoment,
		commentMoment
	} from '@/api/explore';
	import {
		navigateTo
	} from '@/utils/index.js'

	const search = ref('');

	const momentList = ref([]);

	const momentTotal = ref(0);

	const currentMomentId = ref('');

	// const picker = ref(0);

	// const communities = ref([
	// 	{
	// 		id: 1,
	// 		title: 'Community  组队Community  组队Community  组队',
	// 	},
	// 	{
	// 		id: 3,
	// 		title: 'Community 2',
	// 	},
	// 	{
	// 		id: 4,
	// 		title: 'Community  3',
	// 	},
	// ]);

	const infos = ref([{
			person: 'David',
			time: '3',
			avatar: '/static/logo.png',
			info: `I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do. 
		I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do.
		I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do.
		I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do.`,
		},
		{
			person: 'David',
			time: '6',
			avatar: '/static/logo.png',
			info: "I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do. I'll show the step by step, day by day process to build better products, just as Google, Slack, KLM and manu other do.",
		},
	]);

	// 当键盘输入时触发的函数
	const onKeyInput = (value) => {
		console.log('onKeyInput--->', value); // 打印输入的值
	};

	// 绑定选择器变化事件的函数
	// const bindPickerChange = ({ detail }) => {
	// 	console.log(detail); // 打印选择器变化的详细信息
	// 	picker.value = detail.value; // 更新选择器的值
	// };

	// 触发搜索探索操作的函数
	const searchExplore = () => {
		console.log('searchExplore--'); // 打印搜索探索操作的提示
	};

	// 点赞
	const likedExplore = (item) => {
		if (item.liked){ cancleLikeMoment(item.momentId);item.likeCount-=1;}
		else {likeMoment(item.momentId);item.likeCount+=1;};
		item.liked = !item.liked;
	};

	// 打开菜单
	const showMenu = (event, item) => {
		console.log('🚀 ~ showMenu ~ event:', event);
		item.menu = true;
		const current = event.instance.$el;

		const menuEvent = (e) => {
			const paths = e.composedPath();
			console.log('---->', e.composedPath());
			if (!paths.includes(current)) {
				item.menu = false;
				document.removeEventListener('click', menuEvent);
			}
		};
		document.addEventListener('click', menuEvent);
	};

	// 删除
	const deleteExplore = (item, index) => {
		console.log('deleteExplore--->', item, index);
		momentList.value.splice(index, 1);
		deleteMoment(item.momentId);
		item.menu = false;
	};

	// 输入框获取焦点时 获取朋友圈id
	const focusComment = (momentId) => {
		console.log('focusComment--->', momentId);
		currentMomentId.value = momentId;
	};

	// 发表评论
	const confirm = ({
		detail
	}) => {
		console.log('event=--->', detail);
		const value = detail.value;

		commentMoment(currentMomentId.value, value).then((res) => {
			console.log('发表评论-->', res);
			if (res.code == 200) {
				getExploreMoment()
				const moment = momentList.value.find(item => item.momentId == currentMomentId.value)
				if (moment) {
					moment.momentCommentVoList.push({
						momentId: currentMomentId.value,
						info: value
					})
					moment.msg = ""
				}
			}
		});
	};

	const getExploreMoment = () => {
		exploreMoment().then((res) => {
			console.log('res--->', res);
			momentList.value = res.rows;
			momentTotal.value = res.total;
		});
	};
	const toPlan=()=>{
		navigateTo("/pages/plan/index")
	}

	getExploreMoment();
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 36rpx;
	}

	.explore-navi {
		width: 100%;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40rpx;
		padding: 0 12rpx;

		image {
			flex: none;
			width: 42rpx;
			height: 42rpx;
		}
	}

	.search {
		width: 100%;
		height: 52rpx;
		background-color: #f6f7fa;
		border-radius: 10rpx;
		padding: 4rpx 50rpx 4rpx 18rpx;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 400;
		color: #9d9fa0;
		font-family: 'PINGFANG-REGULAR';
		position: relative;

		image {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			right: 14rpx;
			margin: auto;
			background-image: url('/static/imgs/explore/search.png');
			width: 30rpx;
			height: 30rpx;
			cursor: pointer;
		}
	}

	.explore-community {
		margin-top: 40rpx;
		width: 100%;
		height: 60rpx;

		picker {
			height: 60rpx;
		}
	}

	.picker-title {
		width: 100%;
		height: 60rpx;

		text {
			position: relative;
			display: inline-block;
			max-width: 100%;
			color: #ffffff;
			font-family: PINGFANG-BOLD;
			font-size: 52rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 60rpx;
			padding-right: 80rpx;
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			white-space: nowrap;

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	top: 0;
			// 	bottom: 0;
			// 	right: 0;
			// 	margin: auto;
			// 	width: 0;
			// 	height: 0;
			// 	border-style: solid;
			// 	border-width: 20rpx;
			// 	border-color: #ffffff transparent transparent transparent;
			// 	transform: translateY(25%);
			// }
		}
	}

	.explore-list {
		width: 100%;
		overflow: auto;
		margin-top: 30rpx;
		height: calc(100% - 236rpx);
		padding-bottom: 80rpx;

		&-pane {
			width: 100%;
			// max-height: 690rpx;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx;
			background-color: #3d3939;

			&+.explore-list-pane {
				margin-top: 34rpx;
			}
		}
	}

	.pane-info {
		width: 100%;
		height: 400rpx;
		background-color: #b8cef6;
		border-radius: 20rpx;

		&-title {
			width: 100%;
			height: 85rpx;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			gap: 18rpx;
			position: relative;

			.avatar {
				width: 52rpx;
				height: 52rpx;
				border: 1px solid #ffffff;
				border-radius: 50%;
			}

			.person {
				height: 85rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				&-name {
					font-size: 30rpx;
					font-family: PINGFANG-HEAVY;
					font-weight: bolder;
				}

				&-time {
					font-size: 20rpx;
					color: #8f8d8e;
					font-family: PINGFANG-MEDIUM;
				}
			}

			.more {
				font-size: 20rpx;
				font-weight: bolder;
				transform: rotate(90deg);
				position: absolute;
				top: 0;
				bottom: 0;
				right: 40rpx;
				margin: auto;
				cursor: pointer;

				&.menu-open {
					.menu {
						display: block;
					}
				}

				.menu {
					display: none;
					position: absolute;
					right: -80rpx;
					top: 20rpx;
					width: 80rpx;
					color: #3c3e3f;
					font-family: PINGFANG-MEDIUM;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 36rpx;
					transform: rotate(-90deg);
					background-color: #ffffff;
					text-align: center;
					border-radius: 10rpx;
				}
			}
		}

		&-area {
			width: 100%;
			height: calc(100% - 90rpx);
			max-height: 315rpx;
			padding: 20rpx;
			color: #3c3e3f;
			font-family: PINGFANG-MEDIUM;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			word-break: break-all;
			overflow: auto;
			// display: -webkit-box;
			// -webkit-line-clamp: 8;
			// -webkit-box-orient: vertical;
			// text-overflow: ellipsis;
		}
	}

	.pane-talk {
		width: 100%;
		height: auto;
		
		padding: 16rpx 0rpx;

		&-menus {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 0 20rpx;

			.menus-left {
				display: flex;
				align-items: center;
				gap: 34rpx;
			}

			.menus-card {
				display: flex;
				align-items: center;
				gap: 20rpx;

				text {
					color: #f6f6f6;
					font-family: 'PINGFANG-MEDIUM';
					font-size: 28rpx;
					font-weight: 800;
				}
			}

			image {
				&.heart {
					width: 42rpx;
					height: 38rpx;
				}

				&.comment {
					width: 38rpx;
					height: 38rpx;
				}

				&.direct {
					width: 42rpx;
					height: 38rpx;
				}

				&.collect {
					width: 33rpx;
					height: 39rpx;
				}
			}
		}

		&-likes {
			margin-top: 14rpx;
			color: #f6f6f6;
			font-family: 'PINGFANG-BOLD';
			font-size: 28rpx;
			font-weight: 800;
		}

		&-info {
			color: #e9e8e8;
			font-family: 'PINGFANG-REGULAR';
			font-size: 24rpx;
			font-style: normal;
			font-weight: 600;
		}

		&-comment {
			color: #b3b3b3;
			font-family: 'PINGFANG-REGULAR';
			font-size: 24rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 36rpx;
			letter-spacing: -0.39rpx;
		}

		&-search {
			margin: 20rpx 0;
		}
	}

	.comment {
		margin-top: 10rpx;
		width: 100%;
		padding-left: 20rpx ;
		padding-right: 20rpx;
		// padding: 10rpx 20rpx;
		.comment{
			margin-top: 20rpx;
			padding-left: 30rpx;
			padding-right: 0rpx;
		}

		&-pane {
			display: flex;
			align-items: flex-start;
		}

		&-person {
			flex: none;
			display: flex;
			align-items: center;
			gap: 20rpx;

			image {
				width: 52rpx;
				height: 52rpx;
				border: 1px solid #ffffff;
				border-radius: 50%;
			}

			.name {
				color: #ffffff;
				font-family: 'PINGFANG-REGULAR';
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 36rpx;
			}
		}

		&-info {
			color: #ffffff;
			font-family: 'PINGFANG-Light';
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 52rpx;
		}

		&-detail {
			padding-left: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.time {
				color: #b3b3b3;
				font-family: 'PINGFANG-Light';
				font-size: 18rpx;
				font-style: normal;
				font-weight: 400;
			}

			.status {
				display: flex;
				align-items: center;
				gap: 10rpx;

				image {
					width: 38rpx;
					height: 38rpx;
				}

				text {
					color: #ffffff;
					font-family: 'PINGFANG-Light';
					font-size: 14rpx;
					font-style: normal;
					font-weight: 400;
				}
			}
		}
	}
</style>